<template>
	<div class="view">
		<serachInput @search="search" :value="keyword" keyHistory="searchCircleHistory"></serachInput>
		<template v-if="circleList.length > 0 || postList.length > 0">
			<!-- 圈子列表 -->
			<div class="disease-list" v-if="circleList.length > 0">
				<div class="list" v-for="(item, index) in circleList" :key="index"
					@click="to('/pages/CommunityPages/circleDetails/main?id=' + item.id)">
					<image class="image" :src="item.iconUrl || '../../static/images/ic_img.png'"></image>
					<view class="name">{{item.groupName}}</view>
					<image class="go" src="../../static/images/ic_next.png"></image>
				</div>
			</div>
			<!-- 标题 -->
			<div class="title-box" v-if="postList.length > 0">
				<image class="image" src="/static/images/ic_guess.png">
					<p class="title">相关帖子</p>
			</div>
			<!-- 提示 -->
			<div class="warning" v-if="postList.length > 0">
				<text>温馨提示：</text>
				<text>部分症状图可能引起不适，请自行选择查看</text>
			</div>
			<!-- 帖子列表 -->
			<div class="post-list" v-if="postList.length > 0">
				<div class="list" v-for="(item, index) in postList" :key="index"
					@click="to('/pages/CommunityPages/details/main?id=' + item.id)">
					<div class="top">
						<div>
							<image class="avatar" :src="item.avatar || '/static/images/default_avatar.png'"
								mode="aspectFill"></image>
						</div>
						<div class="name-box">
							<p class="name">{{item.nickName || ''}}</p>
							<p class="time">{{item.createTime}}</p>
						</div>
						<div class="solution" v-if="item.helpStatus == 1">已解决</div>
					</div>
					<div v-if="item.recourseAmount > 0" class="reward">悬赏{{item.recourseAmount}}积分</div>
					<div class="content-box">
						<text class="good" v-if="item.publishStatus == 2">精</text>
						<text class="stick" v-if="item.publishStatus == 1">顶</text>
						<text class="ask" v-if="item.publishType == 1">问</text>
						<text v-if="item.publishSubject" class="title">【{{item.publishSubject}}】</text>
						<text class="content">{{item.publishContent || ''}}</text>
					</div>
					<div v-if="item.showImage" class="img-box" @click.stop>
						<image class="image" v-for="(x, y) in item.imgs" :key="y" :src="x"
							@click="preview(x, item.imgs)">
					</div>
					<view class="btn-primary" v-if="item.imgs.length > 0" @click.stop="changeStatus(index)">
						{{item.showImage ? '隐藏图片' : '查看图片'}}
					</view>
					<div class="bottom">
						<div class="disease"
							@click.stop="to('/pages/CommunityPages/circleDetails/main?id=' + item.groupId)">
							{{item.groupName}}
						</div>
						<div class="right-box">
							<div class="operation">
								<image class="icon" src="../../static/images/ic_comment.png">
									<p class="count">{{item.commentsAmount}}</p>
							</div>
							<div class="operation">
								<image class="icon" src="../../static/images/ic_like.png">
									<p class="count">{{item.likesAmount}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<div class="searchList">
				<div class="title">
					<span>热门搜索</span>
				</div>
				<div class="Info" v-if="hotList.length > 0">
					<p @click="search(item)" v-for="(item, index) in hotList" :key="index">
						{{ item }}
					</p>
				</div>
			</div>
			<div v-if="historyList.length > 0" class="searchList">
				<div class="title">
					<span>历史搜索</span>
					<image @click="deleteBatch()" src="../../static/images/ic_delete.png" alt="" />
				</div>
				<div class="Info" v-if="historyList.length > 0">
					<p @click="search(item)" v-for="(item, index) in historyList" :key="index">
						{{ item }}
					</p>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import serachInput from "../../components/searchInput.vue";
	import {
		getHomeKeyWord
	} from "../../apis/request.js";
	export default {
		components: {
			serachInput
		},
		data() {
			return {
				userId: '',
				keyword: '',
				hotList: [],
				historyList: [],
				circleList: [],
				page: 1,
				total: 0,
				postList: []
			};
		},
		methods: {
			async getHot() {
				this.hotList = await getHomeKeyWord();
			},
			deleteBatch() {
				uni.removeStorageSync('searchCircleHistory')
				setTimeout(() => {
					this.historyList = []
					uni.showToast({
						title: '删除成功'
					})
				}, 100)
			},
			to(url) {
				uni.navigateTo({
					url
				});
			},
			// 展示大图
			preview(current, imgList) {
				this.$Imgpreview(current, imgList);
			},
			changeStatus(index) {
				this.postList[index].showImage = !this.postList[index].showImage
			},
			search(e) {
				this.keyword = e
				this.page = 1
				this.postList = []
				this.$api.http('/group/pusGroupInfo/api/n/getListBySearchContent', 'GET', {
					searchContent: this.keyword,
					userId: this.userId
				}, res => {
					this.circleList = res.data.result
				})
				this.getList()
			},
			getList() {
				this.$api.http('/group/publishInfo/api/n/getListByKeywords', 'GET', {
					keywords: this.keyword,
					pageNo: this.page,
					pageSize: 10
				}, res => {
					this.total = res.data.result.total
					let list = res.data.result.records.map(item => {
						item.imgs = []
						if (item.imageUrl) {
							if (item.imageUrl.indexOf(',') != -1) {
								item.imgs = item.imageUrl.split(',')
							} else {
								item.imgs.push(item.imageUrl)
							}
						}
						item.showImage = false
						return item
					})
					this.postList = this.postList.concat(list)
					if (this.postList.length < this.total) {
						this.page++
					}
				})
			}
		},
		onReachBottom() {
			if (this.postList.length < this.total) {
				this.getList()
			}
		},
		created() {
			this.userId = uni.getStorageSync("userInfo").id || null
			Object.assign(this.$data, this.$options.data())
			this.historyList = uni.getStorageSync('searchCircleHistory')
			this.getHot()
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		background-color: #FFF;

		.searchList {
			padding: 30rpx 30rpx 0;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					font-size: 30rpx;
					color: #333333;
				}

				image {
					width: 25.5rpx;
					height: 30rpx;
				}
			}

			.Info {
				display: flex;
				flex-wrap: wrap;
				margin-top: 40rpx;

				p {
					height: 68rpx;
					background: #f1efef;
					border-radius: 34rpx;
					padding: 0rpx 35rpx;
					line-height: 68rpx;
					margin-right: 15rpx;
					color: #333333;
					font-size: 26rpx;
					margin-bottom: 15rpx;
				}
			}
		}

		.disease-list {
			padding: 0rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			background-color: #FFF;

			.list {
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				align-content: center;
				border-bottom: 1upx solid #f2f2f2;

				.image {
					width: 80rpx;
					height: 80rpx;
				}

				.name {
					flex: 1;
					padding-left: 20upx;
					font-size: 28rpx;
				}

				.go {
					margin-left: 10rpx;
					width: 20rpx;
					height: 35rpx;
				}
			}
		}

		.title-box {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			align-content: center;
			background-color: #FFF;

			.image {
				width: 30rpx;
				height: 30rpx;
			}

			.title {
				margin-left: 15rpx;
				font-size: 26rpx;
			}
		}

		.warning {
			// width: 100%;
			padding: 20rpx 30rpx;
			background: #f9edda;
			font-size: 26rpx;

			text:nth-child(1) {
				color: #DD1D1A;
			}

			text:nth-child(2) {
				color: #e6b664;
			}
		}

		.post-list {
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #FFF;

			.list {
				padding: 20rpx 0;
				box-sizing: border-box;
				border-top: 1px solid #f8f8f8;

				.top {
					position: relative;
					display: flex;
					align-items: center;
					align-content: center;

					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.name-box {
						margin-left: 15rpx;
						display: flex;
						align-items: center;
						align-content: center;
						flex-direction: column;

						.name {
							width: 100%;
							font-size: 28rpx;
							text-align: left;
						}

						.time {
							margin-top: 5rpx;
							color: #aaa;
							font-size: 24rpx;
						}
					}

					.solution {
						position: absolute;
						right: 0;
						color: #FF290B;
						font-size: 26rpx;
						font-weight: bold;
						transform: rotate(45deg);
					}
				}

				.reward {
					margin: 5rpx 0;
					font-size: 28rpx;
					color: #E5AE54;
				}

				.content-box {
					.ask {
						margin-right: 5rpx;
						padding: 0 5rpx;
						color: #F83F06;
						font-size: 24rpx;
						border: 1rpx solid #F83F06;
						background-color: #FFF3F4;
						border-radius: 5rpx
					}

					.stick {
						margin-right: 5rpx;
						padding: 0 5rpx;
						color: #1DDA61;
						font-size: 24rpx;
						border: 1rpx solid #1DDA61;
						background-color: #E6F9ED;
						border-radius: 5rpx
					}

					.good {
						margin-right: 5rpx;
						padding: 0 5rpx;
						color: #07A0F8;
						font-size: 24rpx;
						border: 1rpx solid #07A0F8;
						background-color: #E7F4FB;
						border-radius: 5rpx
					}

					.title {
						color: #333333;
						font-size: 30rpx;
					}

					.content {
						color: #333333;
						font-size: 30rpx;
					}
				}

				.img-box {
					display: flex;
					flex-wrap: wrap;

					.image {
						margin: 10rpx 10rpx 0 0;
						width: 222rpx;
						height: 222rpx;
						border-radius: 10rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}

				.bottom {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					align-content: center;
					justify-content: space-between;

					.disease {
						padding: 10rpx 25rpx;
						color: #F48712;
						font-size: 26rpx;
						border-radius: 30rpx;
						background-color: #FEF5EE;
					}

					.right-box {
						display: flex;
						align-items: center;
						align-content: center;

						.operation {
							display: flex;
							align-items: center;
							align-content: center;

							.icon {
								width: 40rpx;
								height: 40rpx;
							}

							.count {
								margin-left: 8rpx;
								font-size: 24rpx;
							}

							&:last-child {
								margin-left: 30rpx;
							}
						}
					}
				}
			}
		}

		.btn-primary {
			height: 60rpx;
			width: 200rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			line-height: 60rpx;
			text-align: center;
			background: #32C59A;
			color: #ffffff;
			font-size: 28rpx;
			border-radius: 100rpx;
		}
	}
</style>